<template>
  <div>
    <h1>$nextTick 的基本使用</h1>
    <p ref="pp">{{msg}}</p>
    <button @click="changeMsg">改msg</button>
  </div>
</template>

<script>
export default {
  name: 'VueDemoApp',

  data() {
    return {
    msg:'你好世界'
    };
  },
  methods: {
    changeMsg(){
      this.msg='hello world'
      //Vue的数据修改后,dom更新是异步的
      this.$nextTick(()=>{
        //这个回调函数会在下一次DOM更新后执行
      console.log(this.$refs.pp.innerHTML);
      })
    }
  },
};
</script>

<style lang="scss" scoped>

</style>